import React from 'react';
import { cn } from '@/lib/utils';

// 鎏金镶嵌兽形铜盒砚的模拟数据
const gildedBeastBoxInkstoneData = {
  title: "鎏金镶嵌兽形铜盒砚",
  subtitle: "月光宝盒",
  imageDescription: "神兽造型砚盒，内藏石板，兽身嵌绿松石、玛瑙",
  basicInfo: {
    age: "东汉",
    material: "青铜鎏金+宝石",
    size: "长25cm，高10cm",
    feature: "兽形诡谲，眼嵌宝石",
    exhibitionHall: "文房馆",
    amazingFeature: "既是砚台，也是镇纸，还是“桌面手办”！"
  },
  function: "贵族书写用具，兽形象征祥瑞，兼具实用与礼仪功能。",
  values: [
    {
      title: "镶嵌华丽",
      description: "宝石虽小，色彩绚丽"
    },
    {
      title: "造型独特",
      description: "神兽似狮似犀，想象力爆表"
    },
    {
      title: "用途多元",
      description: "一物多用，体现汉代匠心"
    }
  ],
  studentTask: "猜猜看，这个“小怪兽”的肚子（盒子）里，藏的是什么？",
  introduction: "别看我长得像萌宠，其实我是个“文具盒”，肚子里装着墨水呢！"
};

// 鎏金镶嵌兽形铜盒砚页面组件
export default function GildedBeastBoxInkstonePage() {
  return (
    <div className="max-w-3xl mx-auto bg-white p-4 md:p-6 shadow-sm">
      {/* 顶部横幅区域 */}
       <header className="bg-gradient-to-r from-amber-500 to-orange-600 text-white rounded-t-lg p-4 mb-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl md:text-3xl font-bold mb-1">{gildedBeastBoxInkstoneData.title}</h1>
            <p className="text-yellow-100">{gildedBeastBoxInkstoneData.subtitle}</p>
          </div>
          <div className="bg-white/20 rounded-full px-3 py-1 text-sm backdrop-blur-sm">
            可打印版本
          </div>
        </div>
      </header>

      {/* 主要内容区域 */}
      <main className="space-y-8">
        {/* 文物图片与基本档案区 */}
        <section className="flex flex-col md:flex-row gap-6">
          {/* 文物图片 */}
          <div className="md:w-1/3 flex flex-col items-center">
            <div className="bg-yellow-50 w-full aspect-square rounded overflow-hidden flex items-center justify-center mb-2">
                <img 
                  src="https://lf-code-agent.coze.cn/obj/x-ai-cn/279122722562/attachment/8_20250926145808.jpg" 
                  alt="鎏金镶嵌兽形铜盒砚" 
    className="w-full h-full object-cover p-0"
               />
            </div>
            <p className="text-sm text-gray-600 text-center italic">
              ▲ {gildedBeastBoxInkstoneData.imageDescription}
            </p>
          </div>

          {/* 基本档案 */}
          <div className="md:w-2/3 bg-gray-50 border-l-4 border-yellow-500 p-4">
            <h2 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
             <span className="bg-amber-200 text-amber-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
                ■
              </span>
              基本档案
            </h2>
            <ul className="space-y-2 text-sm text-gray-700">
              <li className="flex">
                <span className="font-medium w-20">年代：</span>
                <span>{gildedBeastBoxInkstoneData.basicInfo.age}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">材质：</span>
                <span>{gildedBeastBoxInkstoneData.basicInfo.material}</span>
              </li>
              <li className="flex"> 
                <span className="font-medium w-20">尺寸：</span>
                <span>{gildedBeastBoxInkstoneData.basicInfo.size}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">特色：</span>
                <span>{gildedBeastBoxInkstoneData.basicInfo.feature}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">展厅：</span>
                <span>{gildedBeastBoxInkstoneData.basicInfo.exhibitionHall}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">神奇之处：</span>
                <span className="font-semibold text-yellow-700">{gildedBeastBoxInkstoneData.basicInfo.amazingFeature}</span>
              </li>
            </ul>
          </div>
        </section>

        {/* 它是干什么的？ */}
        <section>
          <h2 className="text-lg font-bold text-gray-800 mb-2 flex items-center">
            <span className="bg-yellow-100 text-yellow-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
              ◇
            </span>
            它是干什么的？
          </h2>
          <p className="text-gray-700 pl-7">{gildedBeastBoxInkstoneData.function}</p>
        </section>

        {/* 为什么这么珍贵？ */}
        <section>
          <h2 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
            <span className="bg-yellow-100 text-yellow-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
              ▼
            </span>
            为什么这么珍贵？
          </h2>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {gildedBeastBoxInkstoneData.values.map((value, index) => (
               <div key={index} className="bg-amber-100 p-4 rounded-lg border border-amber-200">
                <h3 className="font-bold text-yellow-800 text-sm mb-1 flex items-center">
                  <span className="text-yellow-500 mr-1">✔</span>
                  {value.title}
                </h3>
                <p className="text-xs text-gray-700">{value.description}</p>
              </div>
            ))}
          </div>
        </section>

        {/* 幽默自我介绍 */}
         <section className="bg-amber-100 p-4 rounded-lg border-l-4 border-amber-400 mt-4">
          <p className="text-gray-700 italic text-sm">{gildedBeastBoxInkstoneData.introduction}</p>
        </section>

        {/* 观察任务区 */}
        <section className="mt-8">
          <h2 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
            <span className="bg-yellow-100 text-yellow-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
              ◇
            </span>
            观察任务
          </h2>
          
          <div className="bg-yellow-50 p-4 rounded-lg border border-yellow-100">
            <h3 className="font-bold text-yellow-800 text-sm mb-2">给小学生的观察任务：</h3>
            <p className="text-gray-700 text-sm mb-4">{gildedBeastBoxInkstoneData.studentTask}</p>
            
            <textarea 
              className="w-full border border-dashed border-gray-300 rounded p-3 min-h-[100px] text-sm"
              placeholder="我的发现(在这里写下你的观察):"
            ></textarea>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer className="mt-8 text-center text-xs text-gray-500 pb-4">
  <p>石头妈妈-南京博物院 · 文物教育系列 · 适合打印学习</p>
      </footer>
    </div>
  );
}